<template>
	<view class="pageColor1">
		<!-- 南站直达 机场直达 福祉车 校园车 页面组件 -->

		<!-- 客服 -->
		<cuservice :ThemeType="ThemeType" :servicetel="service_tel"></cuservice>
		<!-- 头图 -->
		<bannersouth :showtype="showtype"></bannersouth>
		<!-- 主体内容 -->
		<view class="direct_Outer">

			<view class="direct_Contnet">
				<!-- 切换起始点 -->
				<locatswitch @thefail="catswitchfail" :showtype="showtype" @lineInfo="getLineDetail"
					@localInfo="getLocalInfo" :getsystem="getsystem" :ThemeType="ThemeType"></locatswitch>
				<!-- -->
				<view :class="{'DisableBox': submit_flag}" @click="pagetest">

					<view class="tc_InputBox u-margin-top-35" v-if="0">
						<input type="text" v-model.trim="parentinfo.travel_code" class="input_val"
							:placeholder="travelplaceh">
					</view>
					<!-- 选择日期时间 -->
					<view class="period_box" :class="{'padd32': preferObj}">
						<view class="period_time FlexAlign defstar" @click.stop="SelTimePer">
							<view class="icon">
								<i class="iconfont icon-a-lujing2"></i>
							</view>
							<view class="tval">
								<text class="day">
									{{appointment_show || '请选择预约时间'}}
								</text>
							</view>
						</view>

						<view class="preferentbox FlexBetween " v-if="preferObj">
							<view class="pref_left pref_txt">
								<i class="iconfont icon-a-lujing2"></i>
								时段优惠：
							</view>
							<view class="pref_right pref_txt">
								<template v-if="preferObj.discount_type == 1">
									{{preferObj.Adiscount || ''}}折
								</template>
								<template v-else>
									满{{preferObj.amount_limit * 1 || ''}} 减 {{preferObj.deduction_amount * 1}}
								</template>
							</view>
						</view>

					</view>
					<!-- 选择预定模式  -->
					<view class="u-margin-top-35" v-show="isselcar">
						<predetermine ref="ref_ermine" @prederes="retAddServe" @retxushi="retduration"
							:ThemeType="ThemeType" :showtype="ThemeType">
						</predetermine>
					</view>
					<!-- 福址车 选择行程 -->
					<view class="predete_head FlexBetween u-margin-top-35" v-if="showtype == 3">
						<view class="tonctit defstar">
							选择行程
						</view>
						<view class="predete_type FlexAlign">
							<view class="tyselItem FlexAlign radio2" @click="strokeChange(0)">
								<view class="radio_box FlexRow" :class="{ 'isActive': car_snap.stroke_type == 0 }">
								</view>
								单程
							</view>
							<view class="tyselItem FlexAlign radio2" @click="strokeChange(1)">
								<view class="radio_box FlexRow " :class="{ 'isActive': car_snap.stroke_type == 1 }">
								</view>
								往返
							</view>
						</view>
					</view>
					<!-- 福址车 用车时间   -->
					<template v-if="showtype == 3 ">
						<view v-show="car_snap.stroke_type == 1">
							<xscontinu @retuadd="Changeduratin" ref="ref_durat_kup"></xscontinu>
						</view>
					</template>
					<!--  -->
					<view class="u-margin-top-35 u-margin-bottom-34">
						<view class="tonctit u-margin-bottom-25 defstar">
							联系方式
						</view>
						<view class="tc_InputBox ">
							<input type="text" class="input_val" v-model.trim="parentinfo.contact_phone"
								placeholder="请输入联系电话">
						</view>
						<view v-if="isadded" class="tc_InputBox u-margin-top-20 FlexJusStart">
							<view class="emergent_icon FlexRow" :class="{'style4': ThemeType == 4}">
								<i class="iconfont icon-a-lujing12"></i>
							</view>
							<input type="text" v-model.trim="parentinfo.emergency_contact" class="FlexItem input_val"
								placeholder="请输入紧急联系人电话">
						</view>
					</view>

					<!-- 增值服务 -->
					<perkup @retuadd="ChangeAdds" ref="ref_per_kup" :ThemeType="ThemeType"></perkup>

					<view class="defconfirm_btn" :class="`gradient_bg` + ThemeType"
						@click.stop="$u.throttle(ConfirmCOrder, 1500)">
						确认订单
					</view>

				</view>

			</view>

			<!-- 福址车介绍 -->
			<template v-if="showtype == 3">
				<view class="fzc_about FlexRow" @click="clickAbout">
					<i class="iconfont icon-dianpujieshaoxin"></i>
					福祉车介绍
				</view>
			</template>

			<!-- 待出行订单 -->
			<awaitravel ref="ref_await" :showtype="showtype" :ThemeType="ThemeType"></awaitravel>

		</view>

		<!-- 时段选择 -->
		<timeperiod ref="ref_timper" :ThemeType="ThemeType" :max_booking_day="max_booking_day"
			:interval_times="interval_times" :reserve_time="reserve_time" :defvalue="defTimefont" @savetime="savetime"
			@setprefer="setprefer"></timeperiod>

		<!-- 确认订单 -->
		<confirmorder ref="ref_conforder" :ThemeType="ThemeType" :showtype="showtype" :prefer="preferObj"
			@saveclick="ConfirmClick" @hclose="resetOrder" @refreshclick="refreshOrder" :localinfo="local_info"
			:appotime="appointment_show" :orprice="order_amount" :original_amount="original_order_amount"
			:discount_amount="discount_amount" :foundalist="foundalist" :car_snap="car_snap">
		</confirmorder>


	</view>
</template>

<script>
	// 组件
	import locatswitch from "@/bundle4/components/content/locatswitch.vue"
	import predetermine from "@/bundle4/components/content/predetermine.vue"
	import awaitravel from "@/bundle4/components/content/awaitravel.vue"
	import timeperiod from "@/bundle4/components/popup/timeperiod.vue"
	import bannersouth from "@/bundle4/components/banner/bannersouth.vue"
	import perkup from "@/bundle4/components/content/perkup.vue"
	import xscontinu from "@/bundle4/components/content/xscontinu.vue"
	import confirmorder from "@/bundle4/components/popup/confirmorder.vue"
	// api
	import {
		testPhone
	} from "@/bundle4/js/edate.js"
	import {
		api_getStatLists,
		api_getStatLine,
		api_placeOrder,
		api_getstConfig,
	} from "@/api/xtcapi/order.js"
	import {
		Modalinter,
	} from "@/api/xtcapi/vehicle.js"
	// 
	export default {
		props: {
			// 1：南站直达 2：机场直达 3：福祉车 4：校园车
			showtype: {
				type: [Number, String],
				default: 1,
			},
			// 主题颜色 1.蓝色  2.红色  3.橙色 4.暗绿色
			ThemeType: {
				type: [Number, String],
				default: 1,
			},
			// 是否有紧急联系人
			isadded: {
				type: Boolean,
				default: false,
			},
			// 预定模式是否显示
			isselcar: {
				type: Boolean,
				default: true,
			},
		},
		components: {
			locatswitch,
			predetermine,
			timeperiod,
			awaitravel,
			bannersouth,
			perkup,
			confirmorder,
			xscontinu,
		},
		computed: {
			travelplaceh() {
				let txt = this.showtype == 1 ? '车次号' : '航班号'
				return `请输入您的 ${txt}（选填）`
			},
		},
		data() {
			return {

				service_tel: '', // 客服电话
				getsystem: false, // 是否有系统站点
				priceList: [], // 增值、时长、包车拼车列表
				max_booking_day: 0, // 最长预订天数
				interval_times: 0, // 时间间隔
				reserve_time: 0, // 预留时间，小时
				StationInfoLine: '', // 线路信息
				depart_station_snap: '', // 站点起点
				arrive_station_snap: '', // 站点终点
				parentinfo: {
					travel_code: '', // 班次号/航班号
					contact_phone: '', // 联系电话
					appointment_time: '', //预约时间
					emergency_contact: '', // 紧急联系人
				},
				appointment_show: '', // 预约时间
				car_snap: {
					car_model: 2, // 1：拼车，2：包车
					car_sharing_num: 0, // 拼车人数
					car_type_id: 0, // 车型id
					stroke_type: 0,
					added_services: [],
				},
				resOrderData: '', // 下单请求数据
				order_amount: '', // 订单金额
				original_order_amount: '',
				discount_amount: '',
				local_info: {}, // 提交订单弹窗显示数据  起始点
				foundalist: [], // 订单信息
				submit_flag: true, // 拦截遮罩层是否显示
				start_address: '', // 站点 起点信息
				end_address: '', // 站点 终点信息
				pick_up_location: '', // 上车地点经纬度
				drop_off_location: '', // 下车地点经纬度
				promotion_list: '', // 所有优惠信息 时段优惠
				preferObj: '', // 当前时段优惠信息
				defTimefont: '', // 时段选择预约时间 默认值
				coupon_list_id: -1,
			}
		},
		created() {
			this.getPageConfig()
			if (this.showtype < 3) {
				this.getsystem = true
			}
			if (this.userInfo) {
				this.parentinfo.contact_phone = this.userInfo.mobile
			}
		},
		methods: {
			// 福祉车介绍
			clickAbout() {
				uni.navigateTo({
					url: '/bundle4/pages/direct/fzcabout',
				})
			},
			// 获取页面配置信息
			getPageConfig() {
				// 线路类型
				let data = {
					type: this.showtype
				}
				api_getstConfig(data).then(res => {
					let {
						service_enabled,
						service_tel,
					} = res
					// 服务是否开启 
					if (service_enabled == 0) {
						Modalinter()
						return
					}
					this.service_tel = service_tel
					// 获取待出行订单
					if (this.$refs.ref_await) {
						this.$refs.ref_await.getDatasList()
					}
				})
			},

			// 选择行程切换
			strokeChange(flag) {
				this.car_snap.stroke_type = flag
				this.car_snap.duration_services = ''
				// 清楚【用车时间】选项
				this.$refs.ref_durat_kup.clearData()
				if (flag == 1) {
					let type3Obj = this.priceList[0]
					let dlist = type3Obj.duration_services || []
					// 设置【用车时间】选项初始化
					if (this.$refs.ref_durat_kup) {
						this.$refs.ref_durat_kup.TheInitial(dlist)
					}
				}
			},
			// 确认选择的用车时间
			Changeduratin(res) {
				let obj = {
					id: res.id,
					title: res.title,
					price: res.price,
				}
				// 设置下单【用车时间】参数
				this.$set(this.car_snap, 'duration_services', obj)
			},

			// 站点未完善，拦截下一步操作
			pagetest() {
				if (!this.StationInfoLine) {
					this.submit_flag = true
					this.$toast({
						title: '先完成站点选择',
					})
					return
				}
			},

			// 选择了拼车\包车后，返回预定模式结果、增值服务
			retAddServe(res) {

				let {
					addslist,
					carSnap
				} = res
				this.car_snap.added_services = []
				for (let key in carSnap) {
					console.log('key', key)
					this.car_snap[key] = carSnap[key] || ''
				}
				console.log('car_snap', this.car_snap)
				// 设置【增值服务】选项初始化
				if (this.$refs.ref_per_kup) {
					this.$refs.ref_per_kup.TheInitial(addslist)
				}
			},
			// 确认选择的增值服务
			ChangeAdds(res) {
				this.$set(this.car_snap, 'added_services', res)
			},
			// 选择了拼车\包车后，返回用车时间，仅有福址车
			retduration(res) {
				// 设置【用车时间】选项初始化
				if (this.$refs.ref_durat_kup) {
					this.$refs.ref_durat_kup.TheInitial(res)
				}
			},
			// 返回站点、起始点 信息
			getLocalInfo(res) {
				// 
				let {
					depart_station_snap, // 起点信息
					arrive_station_snap, // 终点信息
					start_address, // 起点详情地址 
					end_address, // 终点详情地址 
					pick_up_location, // 上车地点经纬度
					drop_off_location, // 下车地点经纬度
				} = res
				this.depart_station_snap = depart_station_snap || '' // 起点信息
				this.arrive_station_snap = arrive_station_snap || '' // 终点信息
				this.start_address = start_address || '' // 起点详情地址 
				this.end_address = end_address || '' // 终点详情地址 
				this.pick_up_location = pick_up_location || '' // 上车地点经纬度
				this.drop_off_location = drop_off_location || '' // 下车地点经纬度

			},
			// 线路详情获取成功
			getLineDetail(res) {
				if (!res) return
				this.clearSelVal()
				// 优惠信息
				this.promotion_list = res.time_promotion_discount || ''
				// 线路详情
				this.StationInfoLine = res
				// 是否可以操作下一步
				this.submit_flag = false
				// 预约时间限制条件
				this.max_booking_day = res.max_booking_day
				this.interval_times = res.interval_times
				this.reserve_time = res.reserve_time
				// 车型及服务
				this.priceList = res.price_list || []
				this.$refs.ref_per_kup.TheInitial([])
				// 福地车 - 3
				if (this.showtype == 3 && res.price_list) {
					// 福址车预约模式例外设置
					let type3Obj = res.price_list[0]
					// 增值服务列表
					let alist = type3Obj.added_services || []
					// 设置【增值服务】选项初始化
					if (this.$refs.ref_per_kup) {
						this.$refs.ref_per_kup.TheInitial(alist)
					}
					this.car_snap.car_model = 2 // 设置为包车
					this.car_snap.car_sharing_num = '' // 设置乘车人数
					this.car_snap.car_type_id = type3Obj.car_type_id // 设置包车车型id
				} else {
					// 设置【预定模式】选项初始化
					if (this.$refs.ref_ermine) {
						this.$refs.ref_ermine.setSelectInfo(res.price_list)
					}

				}
			},
			clearSelVal() {
				this.car_snap = {
					car_model: 2, // 1：拼车，2：包车
					car_sharing_num: 0, // 拼车人数
					car_type_id: 0, // 车型id
					stroke_type: 0,
					added_services: [],
				}
				this.parentinfo.appointment_time = ''
				// 清空 - 时段优惠信息
				this.preferObj = ''
				// 清空 - 预约时间
				this.appointment_show = ''
				this.defTimefont = ''
				this.$refs.ref_ermine.definitiali()
			},
			// 线路详情获取失败
			catswitchfail() {
				this.StationInfoLine = ''
				this.priceList = []
				this.max_booking_day = ''
				this.interval_times = ''
				this.reserve_time = ''
				this.parentinfo.appointment_time = ''
				this.clearSelVal()
			},
			// 打开时间选择 
			SelTimePer() {
				// 设置【预约时间】时段优惠选项 
				if (this.$refs.ref_timper) {
					this.$refs.ref_timper.openPup(this.promotion_list)
				}
			},
			// 时段选择确认
			savetime(res) {
				this.defTimefont = res.fontstr
				this.appointment_show = res.fontstr2
				this.parentinfo.appointment_time = res.fontstr || ''
			},
			// 时段优惠
			setprefer(obj) {
				this.preferObj = obj
			},
			// 拦截 判断当前选择的预约时间 是否能下单
			placOrderTime() {
				let {
					start_time,
					end_time,
				} = this.StationInfoLine
				let sel_Arr = this.appointment_show.split(' ')
				let sel_Time = sel_Arr[1]
				if (start_time > sel_Time || end_time < sel_Time) {
					uni.showModal({
						title: '提示',
						content: `业务时间（${start_time}~${end_time}），当前预约时间无法下单，可以联系客服预约`,
						// content: `当前预约时间不符合该线路的业务时间【${start_time}~${end_time}】, 无法下单, 请见谅`,
						showCancel: false,
					})
					return true
				}
				return false
			},
			// 确认订单点击
			refreshOrder(coupon_arr) {
				this.coupon_list_id = coupon_arr.coupon_list_id
				setTimeout(() => {
					this.ConfirmCOrder(1)
				}, 0.3 * 1000);
			},
			resetOrder() {
				this.coupon_list_id = -1
			},
			// 确认订单点击
			ConfirmCOrder(confirmtype) {
				let subflag = this.placOrderTime()
				if (subflag) return
				// 
				let {
					travel_code,
					contact_phone,
					appointment_time,
					emergency_contact,
				} = this.parentinfo
				let phone_test = testPhone(contact_phone)
				if (!phone_test) {
					this.$toast({
						title: '请输入正确的联系方式'
					})
					return
				}
				if (!appointment_time) {
					this.$toast({
						title: '请选择预约时间'
					})
					return
				}
				let {
					car_model,
					car_sharing_num,
					car_type_id,
				} = this.car_snap
				if (car_model == 1 && !car_sharing_num) {
					this.$toast({
						title: '请选择拼车人数'
					})
					return
				}
				if (car_model == 2 && !car_type_id) {
					this.$toast({
						title: '请选择包车车型'
					})
					return
				}
				let emergency_test = testPhone(emergency_contact)
				if (!emergency_test && this.showtype > 2) {
					this.$toast({
						title: '请输入正确的紧急联系人电话'
					})
					return
				}
				// 

				if (car_model == 1) {
					this.car_snap.car_type_id = ''
				} else if (car_model == 2) {
					this.car_snap.car_sharing_num = ''
				}
				let UserInfo = uni.getStorageSync('UserInfo') || ''
				if (UserInfo && typeof(UserInfo) == 'string') {
					UserInfo = JSON.parse(UserInfo)
				}
				// 下单请求的数据
				const RequestData = {
					// user_id: UserInfo.id || '',
					order_type: this.showtype, // 订单类型
					station_line_id: this.StationInfoLine.id, // 线路id
					travel_code, // 班次号/航班号
					pick_up_point: '', // 上车地点
					drop_off_place: '', // 下车地点
					depart_station_snap: this.depart_station_snap, // 进站信息
					arrive_station_snap: this.arrive_station_snap, // 到站信息
					car_snap: this.car_snap, // 车辆信息
					contact_phone, // 联系电话
					appointment_time, // 预约时间
					action: 'settle', // 结算：settle，下单：order
					emergency_contact, // 紧急联系人
					pick_up_location: this.pick_up_location, // 上车地点经纬度
					drop_off_location: this.drop_off_location, // 下车地点经纬度
					time_promotion_id: this.preferObj ? this.preferObj.id : '', // 时间段优惠id
					coupon_list_id: this.coupon_list_id,
				}

				if (this.depart_station_snap.area_type == 1) {
					RequestData.pick_up_point = this.depart_station_snap.short_location
				} else {
					RequestData.pick_up_point = this.depart_station_snap.pick_up_point
				}

				if (this.arrive_station_snap.area_type == 1) {
					RequestData.drop_off_place = this.arrive_station_snap.short_location
				} else {
					RequestData.drop_off_place = this.arrive_station_snap.drop_off_place
				}
				this.placesOrder(RequestData, confirmtype)
				// 提交订单弹窗显示数据
				this.local_info = {
					local_start: this.depart_station_snap.title,
					start_detail: this.depart_station_snap.pick_up_point || this.depart_station_snap.short_location,
					local_end: this.arrive_station_snap.title,
					end_train: travel_code,
					end_detail: this.arrive_station_snap.drop_off_place || this.arrive_station_snap.short_location,
				}
			},
			// 下单请求
			placesOrder(resData, confirmtype) {
				uni.showLoading({
					title: '加载中'
				})
				api_placeOrder(resData).then(res => {
					let {
						car_snap,
						contact_phone,
						emergency_contact,
					} = res
					let {
						car_model,
						car_sharing_num,
						car_type_info
					} = car_snap
					this.foundalist = [{
							title: '预定模式',
							value: car_model == 1 ? '拼车' : `包车(${car_type_info ? car_type_info.title : ''})`,
							show: true,
						},
						{
							title: '乘车人数',
							value: car_sharing_num ? `${car_sharing_num}人` : '-',
							show: car_model == 1 ? true : false,
						},
						{
							title: '联系电话',
							value: contact_phone,
							show: true,
						},
						{
							title: '紧急联系人电话',
							value: emergency_contact,
							show: this.showtype > 2 ? true : false,
						},
					]

					this.resOrderData = resData
					this.order_amount = res.order_amount || '0.00'
					this.original_order_amount = res.original_order_amount || '0.00'
					this.discount_amount = res.discount_amount || '0.00'
					// 增值服务
					if (car_snap.added_services && car_snap.added_services.length) {
						let zArr = car_snap.added_services.map(v => v.title)
						let zengzhi = zArr.length ? zArr.join('、') : ''
						this.foundalist.push({
							title: '增值服务',
							value: zengzhi,
							show: true,
						})
					}

					// 用车时间 
					if (car_snap.duration_services) {
						this.foundalist.push({
							title: '用车时间',
							value: car_snap.duration_services.title,
							show: true,
						})
					}
					// 打开弹窗
					if (this.$refs.ref_conforder && confirmtype != 1) {
						this.$refs.ref_conforder.openPup()
					}
					uni.hideLoading()
				})
			},
			// 提交订单点击
			ConfirmClick() {
				if (!this.resOrderData) return
				this.resOrderData.action = 'order'
				api_placeOrder(this.resOrderData).then(res => {
					let c_order_id = res.order_id || ''
					// 提交完成，跳转支付页面
					if (res.pay_status == 1) {
						this.$Router.replace({
							path: '/bundle4/pages/transactres/paymentres',
							query: {
								order_id: c_order_id,
								from: 'order'
							}
						})
					} else {
						uni.reLaunch({
							url: `/bundle2/pages/payment/payment?from=xtcorder&order_id=${c_order_id}`
						})
					}
				})

			},



		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	@import "@/bundle4/css/direct.scss";

	.fzc_about {
		width: 100%;
		height: 100rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(38, 38, 38, 1);
		text-align: center;

		i {
			font-size: 32rpx;
			color: #FF5728;
			margin-right: 15rpx;
		}

	}
</style>